<template>
<view 
	class="search_container_cp">
	<!-- <view class="one">
		<view class="title">
			搜索分类
		</view>
		<view class="content">
			<block v-for="(item,index) in 10" :key="index">
				<u-tag
					:text="'行业'+index"
					mode="dark"
					bg-color="#f2f3f5"
					color="#6b6b6b"/>
			</block>
		</view>
	</view> -->
	<view class="two">
		<view class="title">
			<view class="left">
				历史搜索
			</view>
			<view 
				class="right"
				@click="onRemove">
				清除历史记录
			</view>
		</view>
		<view class="content">
			<block 
				v-for="(item,index) in historyList" :key="index">
				<u-tag
					:text="item"
					mode="dark"
					bg-color="#f2f3f5"
					color="#6b6b6b"
					@click="$emit('change',item)"/>
			</block>
		</view>
	</view>
</view>
</template>

<script>
//搜索面板容器组件，搜索分类呀，历史记录啥的
import{storageX} from "@/common/StorageX";
let searchHistory = storageX(
	'searchHistoryContainer',
	{},  //根据用户名作为键来区分 
);
const storageObj = storageX();
export default {
	name:"SearchContainerCp",
	props:{
		keyWord:{  //用于搜索数据的关键字
			type:String,
			default:'',
		},
	},
	data() {
		return {
			historyList:[],  //搜索历史记录
			userName:storageObj.username || '',
		};
	},
	
	watch:{
		keyWord(newValue){
			if(this.historyList.length>=15){  //删除最后一个，搜索记录最多存15个
				this.historyList.pop();
			}
			this.historyList.unshift(newValue);
		},
	},
	mounted(){
		searchHistory[this.userName] = searchHistory[this.userName] || []; //初始化历史记录
		this.historyList = searchHistory[this.userName];  //初始化历史记录
	},
	methods:{
		onRemove(){  //清除历史记录
			searchHistory[this.userName] = [];  //清空
			this.historyList = searchHistory[this.userName];
		},
	},
}
</script>

<style lang="scss" scoped>
.search_container_cp{
	width: 100vw;
	padding:15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	background-color: #ffffff;
	>.two{
		width: 100%;
	}
	.title{
		font-size: 13px;
		color: #828282;
		margin-bottom: 15px;
		display: flex;
		width: 100%;
		justify-content: space-between;
		>.right{
			color: #ff4f52;
		}
	}
	.content{
		margin-bottom: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		u-tag{
			margin: 0px 5px 5px 0;
			>view{
				padding: 10px 15px;
				display: flex;
				flex-direction: row;
				justify-content:center;
				align-items: center;
				text-align: center;
				font-size: 13px !important;
			}
		}
	}
}
</style>
